<template>
	<div id="navs-wrap">
		<div class="Vimg" style="text-align: center;">
			<img style="margin:auto" src="../assets/images/markAdmin.png" />
		</div>
		
		<el-menu style="width: 100%;border-right:none" :default-active="onRoutes" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
		 :collapse="isCollapse" background-color="transparent" text-color="#fff" active-text-color="#fff" unique-opened
		 router>
			<template v-for="(item,index) in routers">
				<template v-if="item.subs">
					<el-submenu :index="item.index" :key="item.index">
						<template slot="title">
							<i :class="item.icon"></i>&nbsp;
							<span slot="title">{{ item.title }}</span>
						</template>
						<template v-for="subItem in item.subs">
							<el-submenu v-if="subItem.subs" :index="subItem.index" :key="subItem.index">
								<template slot="title">{{ subItem.title }}</template>
								<el-menu-item v-for="(threeItem,i) in subItem.subs" :key="i" :index="threeItem.index">
									{{ threeItem.title }}
								</el-menu-item>
							</el-submenu>
							<el-menu-item v-else :index="subItem.index" :key="subItem.index">
								{{ subItem.title }}
							</el-menu-item>
						</template>
					</el-submenu>

				</template>
				<template v-else>
					<el-menu-item :index="item.index" :key="item.index" :class="{tophome:item.title === '系统首页'}">
						<i :class="item.icon"></i>&nbsp;<span slot="title">{{ item.title }}</span>
					</el-menu-item>
				</template>

			</template>
		</el-menu>
	</div>
</template>
<script>
	import bus from "@/components/bus.js";
	import {
		reactive,
		ref,
		isRef,
		toRefs,
		onMounted,
		computed,
		watch
	} from "@vue/composition-api";
	export default {
		name: "navs",
		setup(props, {
			root
		}) {
			//data数据
			
			// let routers=reactive(root.$router.options.routes);
			let routers = reactive([{
					icon: 'iconfont hlvy-icon-shouye',
					index: 'homePage',
					title: '系统首页'
				},
				{
					icon: 'iconfont hlvy-icon-xueyuanguanliicon-',
					index: 'table',
					title: 'table'
				},
				{
					icon: 'iconfont hlvy-icon-paikeguanliicon-',
					index: 'datepaick',
					title: '日历本'
				},
				{
					icon: 'iconfont hlvy-icon-jiaowu',
					index: 'element-ui',
					title: 'element-ui',
					subs: [{
							index: 'form',
							title: '基本表单'
						},
						{
							index: 'btn',
							title: 'button'
						},
						{
							index: 'tolist',
							title: 'tolist'
						},
						/* {
						     index: 'VeeValidate',
						     title: 'VeeValidate校验'
						 },*/
						{
							index: '3-2',
							title: '三级菜单',
							subs: [{
									index: 'vueEdito',
									title: '富文本编辑器'
								},
								{
									index: 'markdown',
									title: 'markdown编辑器'
								},
							]
						},
						{
							index: 'elupload',
							title: '文件上传'
						}
					]
				}
			]);

			//omMounted


			//computed
			let isCollapse=computed(()=>root.$store.state.isCollapse);
			let onRoutes=computed(()=>root.$route.name);
			
			//method
			let handleOpen = (key, keyPath) => {
				console.log(key, keyPath)
			};
			let handleClose = (key, keyPath) => {
				console.log(key, keyPath)
			};
			// 设置标签
			let setTagsList = (route) => {
				let list=root.$store.state.tagsList;
				const isExist = list.some(item => {
					return item.path === route.fullPath;
				})
				if (!isExist) {
					//如果集合大于8则将前面的替换
					if (list.length >= 8) {
						list.shift();
					}
					list.push({
						title: route.meta.title,
						path: route.fullPath,
						// name: route.matched[1].components.default.name
						name:route.matched[1].name
					})
					root.$store.commit('setTagsList',list)
				}
				
			};
			//watch
			watch(
			()=>root.$route,(newValue, oldValue)=>{
				// console.log(root.$route);
				setTagsList(newValue);
			});
			return {
				isCollapse,
				routers,
				onRoutes,

				handleOpen,
				handleClose,
				setTagsList
			};
		}
	};
</script>

<style lang="scss" scoped>
	// @import "@/styles/config.scss";
	#navs-wrap {
		position: fixed;
		top: 0px;
		left: 0px;
		width: $navWidth;
		height: 100vh;
		background-color: #344a5f;
		@include webkit(transition,all .3s ease 0s);
	}
	.open{
		#navs-wrap{
			width: $navWidth;
		}
	}
	.close{
		#navs-wrap{
			width: $navWidth_1;
		}
	}
	.open{
		.Vimg img{
			width:120px
		}
	}
	.close{
		.Vimg img{
			width:58px
		}
	}
	
</style>
